<template>
    <div class="item" @click='fn' :class='{active:flag}'>
            <slot></slot>
            <br/>
        <span>{{txt}}</span>
    </div>
</template>

<script>
export default {
    //接收到的父数据
    props:['txt','mark','curr'],
        computed:{
        flag(){
            if(this.mark==this.curr){
                return true;
            }
            return false
        }
    },
    methods:{
        fn(){
            this.$emit("change",this.mark)
            console.log("点击菜单：",this.mark);
        }
    }

}
</script>

<style scope>
    .item{
    background-color: pink;
    margin-top: 10px;
    }
    .item span{
        font-size: 20px;
    }
    .item img{
        height: 150px;
        width: 200px;
    }
    .active{
        background-color: green;
    }
</style>